{extend name="iframe" /}
{block name="css"}
    <style type="text/css">
        .addForm{
            margin-top: 20px;
        }
        .submit_btn{
            display: none;
        }
        @media (min-width: 768px){
            .bootstrap-switch{
                margin-top: 7px;
            }
        }
    </style>
{/block}

{block name="content"}
    <div class="container-fluid content-wrapper-box">
        <div class="content-wrapper">
            <form class="form-horizontal addForm" action="" method="post">
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill"></em>客户姓名&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="client_name" name="client_name" class="form-control" placeholder="客户姓名" data-msg="客户姓名不能为空">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>手机号&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="phone" name="phone" class="form-control" placeholder="客户手机号" required data-msg="手机号不能为空">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        微信&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="wechat" name="wechat" placeholder="客户微信号" class="form-control">
                    </div>
                </div>

                <!--【订单】-----------------------------------------------start-->
                <div class="form-group">
                    <label class="control-label col-xs-2 text-green">
                        立即下单&nbsp;
                    </label>
                    <div class="col-xs-8" style="padding-top: 7px;">
                        <label style="text-align: right;margin-left: 8px;">
                            <input type="checkbox" class="" value="1" id="new_order" name="new_order">
                        </label>
                    </div>
                </div>
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        <em class="must_fill"></em>订单客户姓名&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="order_nickname" name="order[order_nickname]" class="form-control" placeholder="订单客户姓名"  data-msg="订单客户姓名不能为空" disabled="disabled">
                    </div>
                </div>
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>订单客户手机号&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="order_phone" name="order[order_phone]" class="form-control" placeholder="订单联系人手机" required data-msg="订单联系人手机不能为空" disabled="disabled">
                    </div>
                </div>
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        微信&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="order_wechat" name="order[order_wechat]" class="form-control" placeholder="订单联系人微信号" disabled="disabled">
                    </div>
                </div>
                <!--【选择服务项目】-->
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>服务项目&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" value="" id="srv_item_id" name="order[srv_item_id]" class="form-control" placeholder="选择服务项目" required data-msg="服务项目不能为空" disabled="disabled">
                    </div>
                </div>
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>服务面积&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="service_area" name="order[service_area]" class="form-control" placeholder="服务的建筑物或者房屋面积" required data-msg="服务面积必须填写" disabled="disabled">
                    </div>
                </div>
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        服务时间&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" id="service_time" name="order[service_time]" class="form-control dateTimePicker" placeholder="服务时间" disabled="disabled">
                    </div>
                </div>
                <!--【省市区】-->
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        服务地区&nbsp;
                    </label>
                    <div class="col-xs-8 form-inline" id="cxselect_addr">
                        <select class="province form-control" name="order[province]" data-first-title="选择省" disabled="disabled"></select>
                        <select class="city form-control" name="order[city]" data-first-title="选择市" disabled="disabled"></select>
                        <select class="area form-control" name="order[area]" data-first-title="选择区" disabled="disabled"></select>
                    </div>
                </div>

                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>详细地址&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <div class="input-group">
                            <input type="text" class="form-control" id="addr" name="order[addr]" placeholder="输入所在城市详细地址" required data-msg="详细地址不能为空">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group new_order hidden">
                    <label class="control-label col-xs-2">
                        订单备注&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <textarea  id="brief"  name="order[brief]" class="form-control" placeholder="订单备注说明" disabled="disabled"></textarea>
                    </div>
                </div>

                <input class="btn btn-primary submit_btn" onclick="submitFrom()" type="submit">
                <input class="btn btn-default reset_btn" type="hidden" onclick="resetForm()">
            </form>
        </div>
    </div>
{/block}

{block name="script"}
    <script type="text/javascript" charset="utf-8" src="__STATIC__/plugins/cxselect/jquery.cxselect.min.js"></script>
    <script src="__STATIC__/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //初始化日期控件
            dateTimePickerInit();

            var srvItems = {$srvItems | da_jencode |raw};
            $('#srv_item_id').selectPage({
                showField : 'service_name',
                keyField : 'id',
                data : srvItems
            });


            $('#cxselect_addr').cxSelect({
                url: '/public/admin/plugins/cxselect/cityData.min.json',
                selects: ['province', 'city', 'area'],
                emptyStyle: 'none'
            });


            $.validator.setDefaults({
                errorPlacement: function (error, element) {
                    if (element.is(":radio") || element.is(":checkbox")) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.appendTo(element.parent());
                    }
                }
            });

            $('#new_order').on('change', function(){
                $('div.new_order').toggleClass('hidden');
                var checked =$(this).is(':checked');
                if(checked){
                    var client_phone = $('#phone').val();
                    $('div.new_order').find(':input').removeAttr('disabled');

                    $('#order_nickname').val( $('#client_name').val() );
                    $('#order_phone').val( client_phone );
                    $('#order_wechat').val( $('#wechat').val() );

                    //重置省市区
                    $('.province').val('');
                    $('.city').val('');
                    $('.area').val('');

                    //ajax根据手机号修改地址省市区
                    if(client_phone && client_phone.length > 9){
                        var phoneInfo = top.parsePhone(client_phone);
                        if(phoneInfo.search && phoneInfo.searchPre ){
                            $.ajax({
                                type: 'GET',
                                url: top.ccIP + '/index.php?m=Fast&c=Invoke&a=mobilearea',
                                data: { search: phoneInfo.search, searchPre: phoneInfo.searchPre },
                                dataType: 'json',
                                success: function (json) {
                                    if(json.result=='success'){
                                        if(json.data.province === json.data.city){
                                            $('.province').val( json.data.province ).change();   //省

                                        }else{
                                            $('.province').val( json.data.province ).change();   //省
                                            $('.city').val( json.data.city ).change();   //市
                                        }
                                    }
                                }
                            });

                        }
                    }

                }else{
                    $('div.new_order').find(':input').attr('disabled', true);
                }
            });


            //自动搜索完成, 参看： https://www.npmjs.com/package/bootstrap-suggest-plugin
            $("#addr").bsSuggest({
                //url: "{:url('Api/searchAddr')}" +'?keyword=',
                url: "{:url('Api/searchAddr')}",
                getDataMethod: "url",
                effectiveFields: ["province", "city", "district", "title", "address"],
                effectiveFieldsAlias:{province: "省",city: "市",district: "区",title: "提示文字",address: "地址"},
                searchFields: ["province", "city", "district", "title", "address"],
                showBtn: false,
                showHeader: false,
                idField: "id",
                keyField: "title",
                allowNoKeyword: false,
                fnAdjustAjaxParam: function(keyword, opts) {
                    //调整 ajax 请求参数调整，增加地区参数
                    //参考： http://lzw.me/pages/demo/bootstrap-suggest-plugin/demo/
                    var province = $('.province').val();
                    var city = $('.city').val();
                    return {
                        timeout: 6000,
                        data: {
                            region: city? city: province,   //搜索区域
                            keyword: $('#addr').val()
                        }
                    };
                }
            }).on('onSetSelectValue', function (e, selectedData, selectedRowData) {
                $('#addr').val(selectedData.key + '-' + selectedRowData.address);
                //服务地区--省市区自动变换
                if(selectedRowData.province === selectedRowData.city){  //直辖市
                    $('.province').val( selectedRowData.province ).change();
                    $('.city').val( selectedRowData.district );

                }else{
                    $('.province').val( selectedRowData.province ).change();
                    $('.city').val( selectedRowData.city ).change();
                    $('.area').val( selectedRowData.district );
                }
            });

        });

        //初始化日期控件
        function dateTimePickerInit() {
            $('.dateTimePicker').datetimepicker({
                format: 'YYYY-MM-DD HH:mm:ss',
                locale: moment.locale('zh-cn')
            });
        }

        //提交表单
        function submitFrom() {
            var  frameIndex= parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            //表单验证
            $(".addForm").validate({
                keydown:true,
                submitHandler: function(form) {
                    $(form).ajaxSubmit({
                        dataType:'json',
                        success:function (response) {
                            if(response.code === 0){
                                parent.toastr.success(response.msg);
                                parent.layer.close(frameIndex);
                            }else{
                                parent.toastr.error(response.msg);
                            }
                            //刷新数据表格
                            parent.searchForm();
                        }
                    });
                }
            })
        }
        function resetForm() {
            $('.addForm')[0].reset();
        }
    </script>
{/block}
